import React from 'react'
import axios from 'axios'
import { useEffect, useState } from 'react'
import bcss from '../css/brand.module.css'
import { Link } from 'react-router-dom'


const Brand = (props) => {
    // console.log(props.sdata);
    // console.log(props.mydata,2222222222222);
    const [data, setdata] = useState([]);
    const [len, setlen] = useState(10);

    // const [sdata, setsdata] = useState()
    // useEffect(async () => {
    //     await axios(`/tyj/brand?type=${props.mytype}`).then((res) => {
    //         setdata(res.data);
    //         console.log(data, 33333);
    //         setlen(res.data.length)
    //     })
    // }, [props.mytype]);

    //修改data值
    useEffect(() => {
        setdata(props.mydata)
    }, [props.mydata])

    // 加载更多
    function loadmore() {
        axios(`/tyj/loadmore1?start=${len}`).then((res1) => {
            setdata(data.concat(res1.data));
            setlen(data.length + 10);
        })
    }

    return <div className={bcss.Box}>
        {data.map((el, index) => {
            return <div className={bcss.brand_box} key={index}>
                <div className={bcss.imgbox}></div>
                <Link to={{ pathname: '/Detail', state: { brandName: el.brandName } }}><img src={el.logo} alt="" className={bcss.brand_img} /></Link>
                <p className={bcss.brand_name}>{el.brandName}</p>
            </div>
        })}
        {data.length >= 10 ? <button className={bcss.more} onClick={() => loadmore()}>加载更多</button> : ''}
    </div>
}
export default Brand